<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no, email=no"/>
    <title>更换银行卡</title>
    <link type="text/css" rel="stylesheet" href="__PUBLIC__/Store/css/weui.css" media="all">
    <link type="text/css" rel="stylesheet" href="__PUBLIC__/Store/css/quick_shop_main.css" media="all">
    <link type="text/css" rel="stylesheet" href="__PUBLIC__/Store/css/index.css?t=9" media="all">

</head>
<body ontouchstart class="modCard">

<div class="weui-cells__title title left">
    <label class="bg_icon1 tips"></label>
    <div>
        <span class="top-tips">
             您的身份证名字与银行卡持卡人姓名不一致,请修改您的资料.
        </span>

        <span class="note">
             注:如姓名不一致,在11月10日后将无法进行交易
        </span>
    </div>
</div>

<form action="" method="post" accept-charset="utf-8">
    <div class="weui-panel">
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label name">
                    店铺名称:
                </label>
            </div>
            <div class="weui-cell__hd">
                <label class="weui-label value">
                    {$info.store_name}
                </label>
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label name">
                    持卡人:
                </label>
            </div>
            <div class="weui-cell__bd">
                <input
                        id="cardOwner"
                        class="weui-input check"
                        type="text"
                        placeholder="请输入持卡人姓名"
                        name="bank_card_username"
                />
            </div>
        </div>
        <div class="weui-cell">
            <div id="js-error-tip" class="error-tip">卡号错误</div>
            <div class="weui-cell__hd">
                <label class="weui-label name">银行卡号:</label>
            </div>
            <div class="weui-cell__bd">
                <input
                        id="bank_card"
                        name="bank_card_sn"
                        class="weui-input check"
                        type="number" pattern="[0-9]*"
                        placeholder="请输入银行卡号"
                />
            </div>
        </div>
    </div>

    <div class="weui-panel">
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label name">银行:</label>
            </div>
            <div class="weui-cell__bd">
                <span class="ico-down"></span>
                <select id="bank_select" name="bank_id" style="padding:0px;height:45px;line-height:45px;">
                    <foreach name="bank_list" item="v">
                        <option value="{$v.bank_id}">{$v.bank_name}</option>
                    </foreach>
                </select>
            </div>
          </div>
          <div class="area">                
            <div class="w50">                    
              <div class="label">   
                省份:                    
              </div>                    
                <select id="province_select" name="province_id">
                    <foreach name="province_list" item="v">
                        <option value="{$v.province_id}">{$v.name}</option>
                    </foreach>
                </select>
              <span class="ico-down"></span>                
            </div>                
            <div class="w50">                    
              <div class="label">                   
                城市:                    
              </div>                    
                <select id="city_select" name="city_id">

                    <foreach name="city_list" item="v">
                        <option value="{$v.city_id}">{$v.name}</option>
                    </foreach>

                </select>
              <span class="ico-down"></span>                
            </div>            
          </div>

        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label name">支行:</label>
            </div>
            <div class="weui-cell__bd">
                <span class="ico-down" style="top:27px;" ></span>
                <select 
                  id="branch_select" name="bank_branch_key" class="tips" 
                  style="line-height:35px;height:35px;">
                    <option value="" disabled selected style='display:none;'>请选择支行</option>
                    <foreach name="branch_list" item="v">
                        <option value="{$v.branch_key}">{$v.branch_name}</option>
                    </foreach>
                </select>
            </div>
        </div>
    </div>

    <div class="weui-panel">
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label name">身份证号:</label>
            </div>
            <div class="weui-cell__bd">
                <input
                        name="idcard_sn"
                        id="idNo"
                        class="weui-input check"
                        type="text"
                        value="输入有误"
                        placeholder="请输入持卡人的身份证号"
                />
            </div>
            <div
                    class="weui-cell__ft"
                    id="idNo-cancel-but"
                    style="display:none;"
            >
                <span class="ico-fork"></span>
                <!--<i class="weui-icon-cancel"></i>-->
            </div>
        </div>
        <div class="weui-cell default">
            <div class="weui-cell__bd">
                <div class="weui-uploader">
                    <div class="weui-uploader__hd">
                        <p class="weui-uploader__title">
                            身份证图片
                            <span class="gray-note">
                                (正反两面)
                            </span>

                        </p>
                        <!--<div class="weui-uploader__info">0/2</div>-->
                    </div>
                    <div class="weui-uploader__bd">
                        <ul class="weui-uploader__files" id="uploaderFiles">
                          <li id="loadingImg"  class="weui-uploader__file weui-uploader__file_status" style="display:none">
                              <div class="weui-uploader__file-content">
                                <img src="__PUBLIC__/Store/css/images/loading.gif"/>  
                              </div>
                          </li>
                        </ul>
                        <div class="weui-uploader__input-box " id="uploader">
                            <input
                                    id="uploaderInput"
                                    class="weui-uploader__input"
                                    type="file"
                                    accept="image/*"
                            />
                            <input
                                    id="changeImage"
                                    type="file"
                                    accept="image/*"
                                    style="display:none;"
                            />
                        </div>
                        <div id="imageUrls" style="display:none">

                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="box">
        <input type="hidden" name="store_id" value="{$store_id}" />
        <button class="submit" type="submit">
            提交
        </button>
    </div>
</form>

<div id="js_muck" class="layer">
    <div class="tipbox">
        <div class="ico-header"><img src="__PUBLIC__/Store/css/images/userpho.png" class="userpho"></div>
        <button id="js_closeMsg" class="bg_icon1 close"></button>
        <div class="clear"></div>
        <h1 class="tip-name">报告老板</h1>
        <div class="bg_icon1 coner"></div>
        <p class="p" id="msg">消息内容</p>
        <!--<div id="double_btn" class="double_btn">-->
        <!--&lt;!&ndash;<button id="js_del" class="btn btn-cancel">确认</button>&ndash;&gt;-->
        <!--<button id="js_ok" class="btn btn-cancel">确认</button>-->
        <!--<button class="btn btn-ok" onclick="hideMsg()">取消</button>-->
        <!--</div>-->
        <div id="single_btn" class="single_btn">
            <button id="js_ok" class="btn btn-cancel" style="margin-left: 0px;">确认</button>
        </div>

    </div>
</div>

<script>
    //初始值
    var g_page = 'modCard';
    var g_uploaderUrl = "{:U('/Mall/Store/upload')}";
    var isRealBankCard = false;
    var g_htmlPath = '__PUBLIC__/Store';
</script>
<script src="__PUBLIC__/Store/js/index.js?t=2"></script>
<script src="__PUBLIC__/script/zepto.js"></script>

<if condition="$msg">
    <if condition="$error">
        <script>
            showMsg('{$msg}');
        </script>
        <else/>
        <script>
            showMsg('{$msg}', function () {
                window.location.href = '{$url}';
            });
        </script>
    </if>
</if>

<script>
    $(function () {

        //银行卡信息
        $("#bank_card").blur(function () {
            var card_sn = $(this).val();

            if (card_sn.length >= 15) {
                $.ajax({
                    type: "GET",
                    url: "/index.php/Mall/Store/getBankCardInfo/card_sn/" + card_sn + ".html",
                    timeout: 3000,
                    success: function (json) {
                        var data = JSON.parse(json);

                        if (data.status == 1) {
                            //选中所属银行
                            if ( !(typeof(data.info.bank_id) == "undefined") && data.info.bank_id != '' ) {
                                $("#bank_select option").each(function (k) {
                                    if ($(this).attr("value") == data.info.bank_id) {
                                        $("#bank_select").get(0).selectedIndex = k;
                                        return false;
                                    }
                                });
                            }

                            //选中所属省份
                            if ( !(typeof(data.info.province_id) == "undefined") && data.info.province_id != '' ) {
                                $("#province_select option").each(function (k) {
                                    if ($(this).attr("value") == data.info.province_id) {
                                        $("#province_select").get(0).selectedIndex = k;
                                        return false;
                                    }
                                });
                            }

                            //选中所属城市
                            if ( !(typeof(data.info.city_id) == "undefined") && data.info.city_id != '' ) {
                                //更新城市列表
                                $("#city_select").html('');
                                appendCityOption(data.city_list);
                                //更新支行列表
                                $("#branch_select").html('<option value="" disabled selected style="display:none;">请选择支行</option>').addClass("tips");
                                appendBranchOption(data.branch_list);

                                $("#city_select option").each(function (k) {
                                    if ($(this).attr("value") == data.info.city_id) {
                                        $("#city_select").get(0).selectedIndex = k;
                                        return false;
                                    }
                                });
                            }

                            isRealBankCard = true;
                        } else {
                            //重置支行选择
                            $("#branch_select").get(0).selectedIndex = 0;
                            $("#branch_select").addClass("tips");

                            //提示信息
                            isRealBankCard = false;
//                            toggleSubmitStatus(false);
                            showMsg(data.msg);
                            return false;
                        }
                    }
                });
            } else {
                //银行卡号少于15位
                isRealBankCard = false;
//                toggleSubmitStatus(false);
                showMsg('请输入正确的银行卡号');
                return false;
            }
        });

        //选择银行
        $("#bank_select").change(function () {
            var bank_id = $(this).val();
            var city_id = $("#city_select").val();

            //获取支行
            getBranchList(bank_id, city_id);
        });

        //选择省份
        $("#province_select").change(function () {
            var province_id = $(this).val();
            $.ajax({
                type: "GET",
                url: "/index.php/Mall/Store/getCityList/province_id/" + province_id + ".html",
                timeout: 3000,
                beforeSend: function () {
                    $("#city_select").html("");
                },
                success: function (json) {
                    var data = JSON.parse(json);
                    if (data.status == 1) {
                        //插入城市列表
                        appendCityOption(data.list);

                        //获取支行
                        var bank_id = $("#bank_select").val();
                        var city_id = data.list[0].city_id;
                        getBranchList(bank_id, city_id);
                    } else {
                        showMsg('获取省份失败');
                    }
                }
            });
        });

        //选择城市
        $("#city_select").change(function () {
            var bank_id = $("#bank_select").val();
            var city_id = $(this).val();

            //获取支行
            getBranchList(bank_id, city_id);
        });

        //获取支行
        function getBranchList(bank_id, city_id) {
            $.ajax({
                type: "GET",
                url: "/index.php/Mall/Store/getBranchList/bank_id/" + bank_id + "/city_id/" + city_id + ".html",
                timeout: 3000,
                beforeSend: function () {
                    $("#branch_select").html('<option value="" disabled selected style="display:none;">请选择支行</option>').addClass("tips");
                },
                success: function (json) {
                    var data = JSON.parse(json);

                    if (data.status == 1) {
                        //插入支行列表
                        appendBranchOption(data.list);
                    } else {
                        //错误信息
                        showMsg('获取支行失败');
                    }
                }
            });
        }

        //插入城市选择列表
        function appendCityOption(data) {
            if (data == null) {
                return false;
            }

            for (var i = 0; i < data.length; i++) {
                var option = '<option value="' + data[i].city_id + '">' + data[i].name + '</option>';
                $("#city_select").append(option);
            }
        }

        //插入支行选择列表
        function appendBranchOption(data) {
            if (data == null) {
                return false;
            }

            for (var i = 0; i < data.length; i++) {
                var option = '<option value="' + data[i].branch_key + '">' + data[i].branch_name + '</option>';
                $("#branch_select").append(option);
            }
        }
    });
</script>

</body>
</html>
